<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8" />
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Hello World!</title>
  <link rel="stylesheet" href="../../Source/Widgets/widgets.css" />
  <meta name="Keywords" content="html,dom,点,跟随,cesium,同步,divpoint,pointdiv ">
  <style>
    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>

  <style>
    .pop-box-2024-1-22 {
      color: #fff;
      background-color: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(2px);
      pointer-events: none;
      border-radius: 10px;
      padding: 8px;

      .header {
        display: flex;

        .close {
          margin-left: auto;
          cursor: pointer;
          pointer-events: auto;
          position: relative;

          &::after {
            position: absolute;
            content: '';
            inset: -6px;
          }
        }
      }

      .content {
        display: grid;
        grid-template-columns: repeat(3, max-content);

        .sg {
          padding-top: 30px;
          display: inherit;
          grid-template-columns: subgrid;
          grid-column: 1/ -1;
          padding: 6px;
        }
      }
    }
  </style>
  <!-- <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script> -->
</head>

<body>
  <div id="cesiumContainer"></div>
  <script type="module">
    window.CESIUM_BASE_URL = '../../Source/'
    import * as Cesium from '../../Source/Cesium.js'
    import {DomEntity} from './DomEntity.js'
    // Cesium.Ion.defaultAccessToken =
    //   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MmE1MDRmNi1hMjA3LTRlNjUtYTU0OC02ZjY5NmY0MGE2MjYiLCJpZCI6NTY4NjUsImlhdCI6MTYyMTg1NzA2Nn0.RMiMaEoQ_319er2NlFBEH00xC5BzD9OeunYmAjdu2SY'
    const viewer = (window.viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider: new Cesium.TileMapServiceImageryProvider({
        url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'),
      }),
      baseLayerPicker: false,
      shouldAnimate: true,
      // terrainProvider: Cesium.createWorldTerrain(),
    }))
    // For more information on Cesium World Terrain, see https://cesium.com/platform/cesium-ion/content/cesium-world-terrain/

    const scene = viewer.scene

    const position = Cesium.Cartesian3.fromDegrees(-100, 38, 0)

    const arr = [
      { key: '地理位置', value: '广东省' },
      { key: '地理位置', value: '广东省' },
      { key: '地理位置', value: '广东省' },
    ]
    const content = arr.reduce((acc, { key, value }) => {
      return (
        acc +
        `
        <div class="sg">
             <span class="key">${key}</span>
             <span class="colon">：</span>
             <span class="value">${value}</span>
        </div>
        `
      )
    }, '')

    const popBox = new DomEntity({
      position,
      html: `
    <div class="pop-box-2024-1-22">
        <div class="header">
            <span class="title">标题栏</span>
            <span class="close">X</span>
        </div>
        <div class="content">
          ${content}
        </div>
    </div>
  `,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
      // pixelOffset:new Cesium.Cartesian2(100,-30)
    })


  </script>
</body>

</html>